<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2023-01-09 13:44:48
 * @LastEditors: chaixinyu
 * @LastEditTime: 2023-01-13 17:49:43
-->
<template>
   <editor v-model="myValue" :init="init" :id="tinymceId" ></editor>
</template>

<script setup>
//在js中引入所需的主题和组件
import tinymce from 'tinymce/tinymce'
// import 'tinymce/skins/content/default/content.css'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/models/dom' // 这里是个坑 一定要引入

//在TinyMce.vue中接着引入相关插件
import "tinymce/icons/default/icons"
import "tinymce/plugins/image" // 插入上传图片插件
import "tinymce/plugins/link" // 插入上传链接插件
import "tinymce/plugins/codesample" // 插入代码高亮插件
import "tinymce/plugins/fullscreen" // 全屏
// import "tinymce/plugins/media" // 插入视频插件
import "tinymce/plugins/wordcount" // 字数统计插件
import "tinymce/plugins/code" // 源码
// import "tinymce/plugins/fullscreen" //全屏

//接下来定义编辑器所需要的插件数据
import { reactive, ref } from "vue"
import { onMounted, defineEmits, watch } from "@vue/runtime-core"
const emits = defineEmits(["getContent"])

//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({
  value: {
    type: String,
    default: () => {
      return ""
    },
  },
  baseUrl: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    // default: "lists  table",
    default: "image link fullscreen codesample ",
  },//必填
  toolbar: {
    type: [String, Array],
    default:
      // "codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat ",
      "image link fullscreen codesample ",
    },//必填
})

//用于接收外部传递进来的富文本
const myValue = ref(props.value)
const tinymceId = ref("vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""))
//定义一个对象 init初始化
const init = reactive({
  selector: '#' + tinymceId.value, //富文本编辑器的id,
  statusbar: false, //隐藏最下边状态栏
  toolbar_location:'bottom', //工具栏在底部
  placeholder: '请输入答案', //编辑框显示默认文字
  language_url: "/tinymce/langs/zh-Hans.js", // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
  language: "zh-Hans", //语言
  skin_url: "/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
  height: 300, //编辑器高度
  branding: false, //是否禁用“Powered by TinyMCE”
  menubar: false, //顶部菜单栏显示
  image_dimensions: false, //去除宽高属性
  plugins: props.plugins,  //这里的数据是在props里面就定义好了的
  toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
  images_upload_url: 'http://127.0.0.1:3000/api/course/upload', //指定一个接受上传文件的后端处理程序地址
  content_style: "img {max-width:50%;}", //在编辑器内的限制图片大小
  file_picker_callback: function (callback, value, meta) {  //实现文件上传
      //文件分类
      var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
      //后端接收上传文件的地址
      var upurl='http://127.0.0.1:3000/api/course/upload';
      //为不同插件指定文件类型及后端地址
      // switch(meta.filetype){
      //     case 'image':
      //         filetype='.jpg, .jpeg, .png, .gif';
      //         upurl='upimg.php';
      //         break;
      //     case 'media':
      //         filetype='.mp3, .mp4';
      //         upurl='upfile.php';
      //         break;
      //     case 'file':
      //     default:
      // }
      //模拟出一个input用于添加本地文件
      var input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', filetype);
      input.click();
      input.onchange = function() {
          var file = this.files[0];

          var xhr, formData;
          console.log(file.name);
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open('POST', upurl);
          xhr.onload = function() {
              var json;
              if (xhr.status != 200) {
                  failure('HTTP Error: ' + xhr.status);
                  return;
              }
              json = JSON.parse(xhr.responseText);
              if (!json || typeof json.location != 'string') {
                  failure('Invalid JSON: ' + xhr.responseText);
                  return;
              }
              callback(json.location);
          };
          formData = new FormData();
          formData.append('file', file, file.name );
          xhr.send(formData);

      };
  },
  font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
  fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
  paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  paste_webkit_styles: "all",
  paste_merge_formats: true,
  nonbreaking_force_tab: false,
  paste_auto_cleanup_on_paste: false,
  file_picker_types: 'file image',
  content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
})

//监听外部传递进来的的数据变化
watch(
  () => props.value,
  () => {
    myValue.value = props.value
    emits("getContent", myValue.value)
  }
)
//监听富文本中的数据变化
watch(
  () => myValue.value,
  () => {
    emits("getContent", myValue.value)
  }
)
//在onMounted中初始化编辑器
onMounted(() => {
  tinymce.init({})
})
</script>

<style>

</style>
